import React, { useState } from 'react'
import { 
  Leaf, 
  Plus, 
  Download, 
  Upload, 
  Calculator,
  TrendingUp,
  TrendingDown,
  BarChart3,
  FileText,
  Settings,
  Filter,
  Search,
  Calendar,
  Target,
  AlertTriangle,
  CheckCircle
} from 'lucide-react'
import { LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, BarChart, Bar } from 'recharts'

// Mock数据
const emissionData = [
  {
    id: 1,
    category: '范围一 - 直接排放',
    subcategory: '固定燃烧',
    source: '天然气锅炉',
    value: 1250,
    unit: 'tCO2e',
    date: '2024-06-01',
    status: 'verified'
  },
  {
    id: 2,
    category: '范围一 - 直接排放',
    subcategory: '移动燃烧',
    source: '公司车辆',
    value: 320,
    unit: 'tCO2e',
    date: '2024-06-01',
    status: 'pending'
  },
  {
    id: 3,
    category: '范围二 - 间接排放',
    subcategory: '电力消耗',
    source: '办公用电',
    value: 890,
    unit: 'tCO2e',
    date: '2024-06-01',
    status: 'verified'
  },
  {
    id: 4,
    category: '范围三 - 其他间接排放',
    subcategory: '商务差旅',
    source: '员工出差',
    value: 387,
    unit: 'tCO2e',
    date: '2024-06-01',
    status: 'verified'
  }
]

const chartData = [
  { month: '1月', scope1: 1200, scope2: 850, scope3: 350 },
  { month: '2月', scope1: 1180, scope2: 820, scope3: 320 },
  { month: '3月', scope1: 1250, scope2: 890, scope3: 387 },
  { month: '4月', scope1: 1220, scope2: 870, scope3: 365 },
  { month: '5月', scope1: 1280, scope2: 920, scope3: 410 },
  { month: '6月', scope1: 1250, scope2: 890, scope3: 387 },
]

const pieData = [
  { name: '范围一', value: 1570, color: '#10B981' },
  { name: '范围二', value: 890, color: '#3B82F6' },
  { name: '范围三', value: 387, color: '#F59E0B' },
]

const targets = [
  {
    id: 1,
    name: '2024年减排目标',
    target: 2500,
    current: 2847,
    unit: 'tCO2e',
    deadline: '2024-12-31',
    status: 'at-risk'
  },
  {
    id: 2,
    name: '2030年碳中和目标',
    target: 0,
    current: 2847,
    unit: 'tCO2e',
    deadline: '2030-12-31',
    status: 'on-track'
  }
]

const quickStats = [
  { title: '总排放量', value: '2,847', unit: 'tCO2e', change: '+12.5%', trend: 'up', icon: Leaf, color: 'text-green-600' },
  { title: '减排目标', value: '2,500', unit: 'tCO2e', change: '-13.9%', trend: 'down', icon: Target, color: 'text-blue-600' },
  { title: '数据完整性', value: '94.2', unit: '%', change: '+2.1%', trend: 'up', icon: CheckCircle, color: 'text-purple-600' },
  { title: '验证状态', value: '85.7', unit: '%', change: '+5.3%', trend: 'up', icon: BarChart3, color: 'text-orange-600' },
]

function CarbonFootprintMain() {
  const [activeTab, setActiveTab] = useState('overview')
  const [filter, setFilter] = useState('all')

  const getStatusColor = (status) => {
    switch (status) {
      case 'verified': return 'text-green-600 bg-green-50'
      case 'pending': return 'text-yellow-600 bg-yellow-50'
      case 'at-risk': return 'text-red-600 bg-red-50'
      case 'on-track': return 'text-green-600 bg-green-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const getStatusText = (status) => {
    switch (status) {
      case 'verified': return '已验证'
      case 'pending': return '待验证'
      case 'at-risk': return '有风险'
      case 'on-track': return '正常'
      default: return '未知'
    }
  }

  const filteredData = filter === 'all' 
    ? emissionData 
    : emissionData.filter(item => item.category.includes(filter))

  return (
    <div className="p-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">碳足迹管理</h1>
          <p className="text-gray-600">组织级和产品级碳足迹计算与管理</p>
        </div>
        <div className="flex items-center space-x-3">
          <button className="flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
            <Upload className="w-4 h-4 mr-2" />
            导入数据
          </button>
          <button className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
            <Plus className="w-4 h-4 mr-2" />
            添加排放源
          </button>
        </div>
      </div>

      {/* 快速统计 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {quickStats.map((stat) => {
          const Icon = stat.icon
          return (
            <div key={stat.title} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-600">{stat.title}</p>
                  <p className="text-2xl font-bold text-gray-900">
                    {stat.value}
                    <span className="text-sm font-normal text-gray-500 ml-1">{stat.unit}</span>
                  </p>
                </div>
                <div className="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center">
                  <Icon className={`w-6 h-6 ${stat.color}`} />
                </div>
              </div>
              <div className="mt-2 flex items-center">
                {stat.trend === 'up' ? (
                  <TrendingUp className="w-4 h-4 text-green-600 mr-1" />
                ) : (
                  <TrendingDown className="w-4 h-4 text-red-600 mr-1" />
                )}
                <span className={`text-sm font-medium ${
                  stat.trend === 'up' ? 'text-green-600' : 'text-red-600'
                }`}>
                  {stat.change}
                </span>
                <span className="text-sm text-gray-500 ml-1">vs 上月</span>
              </div>
            </div>
          )
        })}
      </div>

      {/* 标签页导航 */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {[
              { id: 'overview', name: '概览' },
              { id: 'data', name: '排放数据' },
              { id: 'calculation', name: '计算工具' },
              { id: 'targets', name: '减排目标' },
              { id: 'reports', name: '报告' }
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === tab.id
                    ? 'border-green-500 text-green-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.name}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {/* 概览标签页 */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* 排放趋势 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">排放趋势分析</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <AreaChart data={chartData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip />
                      <Area type="monotone" dataKey="scope1" stackId="1" stroke="#10B981" fill="#10B981" fillOpacity={0.3} />
                      <Area type="monotone" dataKey="scope2" stackId="1" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.3} />
                      <Area type="monotone" dataKey="scope3" stackId="1" stroke="#F59E0B" fill="#F59E0B" fillOpacity={0.3} />
                    </AreaChart>
                  </ResponsiveContainer>
                </div>

                {/* 排放分布 */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">排放范围分布</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={pieData}
                        cx="50%"
                        cy="50%"
                        innerRadius={60}
                        outerRadius={100}
                        paddingAngle={5}
                        dataKey="value"
                      >
                        {pieData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                  <div className="mt-4 space-y-2">
                    {pieData.map((item) => (
                      <div key={item.name} className="flex items-center justify-between text-sm">
                        <div className="flex items-center">
                          <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: item.color }}></div>
                          <span className="text-gray-600">{item.name}</span>
                        </div>
                        <span className="font-medium">{item.value} tCO2e</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 排放数据标签页 */}
          {activeTab === 'data' && (
            <div className="space-y-4">
              {/* 过滤器 */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  <select
                    value={filter}
                    onChange={(e) => setFilter(e.target.value)}
                    className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                  >
                    <option value="all">全部范围</option>
                    <option value="范围一">范围一</option>
                    <option value="范围二">范围二</option>
                    <option value="范围三">范围三</option>
                  </select>
                  <button className="flex items-center px-3 py-2 text-gray-600 hover:text-gray-900">
                    <Filter className="w-4 h-4 mr-2" />
                    更多筛选
                  </button>
                </div>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <input
                    type="text"
                    placeholder="搜索排放源..."
                    className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                  />
                </div>
              </div>

              {/* 数据表格 */}
              <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          排放类别
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          子类别
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          排放源
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          排放量
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          状态
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          操作
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredData.map((item) => (
                        <tr key={item.id} className="hover:bg-gray-50">
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            {item.category}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {item.subcategory}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            {item.source}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {item.value.toLocaleString()} {item.unit}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(item.status)}`}>
                              {getStatusText(item.status)}
                            </span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <button className="text-green-600 hover:text-green-900 mr-3">编辑</button>
                            <button className="text-red-600 hover:text-red-900">删除</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

          {/* 计算工具标签页 */}
          {activeTab === 'calculation' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-gray-50 rounded-lg p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">排放因子计算器</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">活动数据</label>
                      <input
                        type="number"
                        placeholder="输入活动数据"
                        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">排放因子</label>
                      <select className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option>选择排放因子</option>
                        <option>电力排放因子</option>
                        <option>天然气排放因子</option>
                        <option>汽油排放因子</option>
                      </select>
                    </div>
                    <button className="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                      <Calculator className="w-4 h-4 mr-2" />
                      计算排放量
                    </button>
                  </div>
                </div>

                <div className="bg-gray-50 rounded-lg p-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">批量计算工具</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">上传数据文件</label>
                      <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                        <Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
                        <p className="text-sm text-gray-600">拖拽文件到此处或点击上传</p>
                        <p className="text-xs text-gray-500 mt-1">支持 .xlsx, .csv 格式</p>
                      </div>
                    </div>
                    <button className="w-full flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                      <Upload className="w-4 h-4 mr-2" />
                      开始批量计算
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* 减排目标标签页 */}
          {activeTab === 'targets' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {targets.map((target) => (
                  <div key={target.id} className="bg-white rounded-lg border border-gray-200 p-6">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="text-lg font-semibold text-gray-900">{target.name}</h3>
                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(target.status)}`}>
                        {getStatusText(target.status)}
                      </span>
                    </div>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">目标值</span>
                        <span className="text-lg font-bold text-gray-900">{target.target} {target.unit}</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">当前值</span>
                        <span className="text-lg font-bold text-gray-900">{target.current} {target.unit}</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-600">截止日期</span>
                        <span className="text-sm text-gray-900">{target.deadline}</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div 
                          className="bg-green-600 h-2 rounded-full transition-all duration-300"
                          style={{ width: `${Math.min((target.current / target.target) * 100, 100)}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* 报告标签页 */}
          {activeTab === 'reports' && (
            <div className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <FileText className="w-8 h-8 text-blue-600" />
                    <button className="text-blue-600 hover:text-blue-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">月度排放报告</h3>
                  <p className="text-sm text-gray-600 mb-4">2024年6月碳足迹月度报告</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>

                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <BarChart3 className="w-8 h-8 text-green-600" />
                    <button className="text-green-600 hover:text-green-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">季度分析报告</h3>
                  <p className="text-sm text-gray-600 mb-4">2024年Q2碳足迹分析报告</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-06-30
                  </div>
                </div>

                <div className="bg-white rounded-lg border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <Target className="w-8 h-8 text-purple-600" />
                    <button className="text-purple-600 hover:text-purple-700">
                      <Download className="w-4 h-4" />
                    </button>
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">年度目标报告</h3>
                  <p className="text-sm text-gray-600 mb-4">2024年减排目标进展报告</p>
                  <div className="flex items-center text-sm text-gray-500">
                    <Calendar className="w-4 h-4 mr-1" />
                    2024-12-31
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default CarbonFootprintMain 